
<template>
  <div>
    <page :asideShow="asideShow" :footShow="footShow">
      <div slot="toolbar">
        <el-form :inline="true" :model="filters" label-position="right">
          <el-form-item label="选择小区">
            <el-select
              v-model="filters.CID"
              @change="refreshPageRequest(1)"
              filterable
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in getCommunity"
                :key="item.CID"
                :label="item.name"
                :value="item.CID"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select
              v-model="filters.online"
              filterable
              placeholder="请选择"
              @keydown.enter.native="handleQuery('a')"
              clearable
            >
              <el-option
                v-for="item in getStatus"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleQuery('a')">查询</el-button>
            <el-button type="primary" @click="handleAdd({})" v-show="hasPerm('yunyao:but:add')">新增</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 内容区域 -->
      <div slot="content">
        <el-table
          :header-cell-style="{ background: '#e7eaf0', color: '#606266' }"
          :data="pageResult"
          stripe
          v-loading="loading"
          v-if="footShow == true"
          style="width: 100%"
          element-loading-text="加载中..."
        >
          <el-table-column prop="CID" label="小区" align="center">
            <template slot-scope="scope">
              <span>
                {{
                  scope.row.CID
                    ? getCommunity.find((item) => {
                        return item.CID === scope.row.CID;
                      }).name || scope.row.CID
                    : "-"
                }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="设备名" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.name || "-" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="direction" label="进出" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.direction === 35">进</span>
              <span v-else>出</span>
            </template>
          </el-table-column>
          <el-table-column prop="online" label="状态" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.online === 1">在线</span>
              <span v-else style="color: red">离线</span>
            </template>
          </el-table-column>
          <el-table-column prop="insertTime" label="创建时间" align="center">
            <template slot-scope="scope">
              <span>{{ $format(scope.row.insertTime) }}</span>
            </template>
          </el-table-column>

          <el-table-column
            fixed="right"
            header-align="center"
            align="center"
            width="250"
            :label="$t('action.operation')"
          >
            <template slot-scope="scope">
              <el-button type="primary" @click="deleteOne(scope.row)" v-show="hasPerm('yunyao:but:remove')">
                解绑
              </el-button>
              <el-button type="primary" @click="handleSee(scope.row)" v-show="hasPerm('yunyao:but:see')">
                查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <addvote v-if="footShow == false" @retList="retList" @closeAddequ="closeAddequ"></addvote>
      </div>
      <!-- 底部区域 -->
      <div slot="footer">
        <el-pagination
          layout="total, prev, pager, next, jumper"
          @current-change="refreshPageRequest"
          :current-page="pageRequest.page"
          :page-size="pageRequest.limit"
          :total="totalSize"
          v-if="footShow == true"
          style="float: right"
        ></el-pagination>
      </div>
    </page>
    <el-dialog
      class="dialog-container"
      title="状态详情"
      :visible.sync="dialogVisible"
      :modal-append-to-body="false"
    >
      <div class="record">
        <el-table
          :header-cell-style="{}"
          :data="dialogData"
          v-loading="loading"
          style="width: 100%"
          element-loading-text="加载中..."
          row-class-name
          cell-class-name
        >
          <el-table-column prop="type" label="设备状态" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.status === 1 ? "登录在线" : "通知离线" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="occurTime" label="时间" align="center">
            <template slot-scope="scope">
              <span>{{ $format(scope.row.occurTime) }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import addvote from "./addvote";
export default {
  components: {
    addvote
  },
  data() {
    return {
      seeVisible: false,
      recordVisible: false,
      dialogVisible: false,
      seeData: {},
      dialogData: [],
      footShow: true,
      loading: true,
      title: "详情",
      pageRequest1: {
        page1: 1,
        limit: 10
      },
      // 弹框
      dialogTableVisible: false,
      // 默认图片
      tableData: [],
      asideShow: false,
      unitShow: false,
      pageResult: [],
      getCommunity: [],
      filters: {
        CID: "",
        online: ""
      },
      pageRequest: {
        page: 1,
        limit: 10
      },
      columns: [],
      loading: false,
      totalSize: 0,
      totalSize1: 0,
      operation: false, // true:新增, false:编辑
      // 新增编辑界面是否显示
      editVisible: false,
      addVisible: false,
      // 新增编辑界面数据
      dataForm: {},
      dictList: {},
      editData: {},
      currentObj: {},
      getStatus: [
        {
          value: 1,
          name: "在线"
        },
        {
          value: 0,
          name: "离线"
        }
      ]
    };
  },
  mounted() {
    this.filters.CID = localStorage.getItem("home_CID");
    this.dictList = JSON.parse(sessionStorage.getItem("dictData"));
    this.handleQuery();
    this.getCommunityList();
  },

  methods: {
    retList() {
      this.handleQuery();
    },
    closeAddequ() {
      this.footShow = true;
      this.handleQuery();
    },
    handleSee(row) {
      this.dialogVisible = true;
      let params = {};
      params.sn = row.sn;
      this.$api.wxNotic.sys_facedevice_onoffline(params).then((res) => {
        if (res.code == 0) {
          this.dialogData = res.data;
        }
      });
    },
    refreshPageRequest1(page) {
      this.pageRequest1.page1 = page;
      this.handleSee();
    },
    toRecord() {
      this.recordVisible = true;
    },
    handleClose(done) {
      // this.$confirm("确认关闭？")
      //   .then((_) => {
      done();
      // })
      // .catch((_) => {});
    },
    gsm_getData(GSM_IMEI) {
      return new Promise((resolve) => {
        let params = {
          GSM_IMEI: GSM_IMEI
        };
        this.$api.wxNotic.gsm_getData(params).then((res) => {
          if (res.code == 0) {
            resolve(res.data);
          } else {
            resolve([]);
          }
        });
      });
    },

    // 查询列表
    handleQuery(val) {
      this.footShow = true;
      let param = {
        page: val ? "" : this.pageRequest.page,
        limit: val ? "" : this.pageRequest.limit
      };
      let params = Object.assign(param, this.filters);
      let paramJson = JSON.stringify(params);
      this.loading = true;
      this.$api.wxNotic.sys_facedevice_list(paramJson).then((res) => {
        if (res.code == 0) {
          this.loading = false;
          this.pageResult = res.data;
          this.totalSize = res.count;
          this.pageResult.map((item) => {
            item.insert_time = this.$format(item.insertTime);
          });
        } else {
          this.$message({ message: "操作失败, " + res.msg, type: "error" });
        }
      });
    },

    //删除
    handleDelete(row) {
      this.$confirm("确认删除选中记录吗？", "提示", {
        type: "warning"
      }).then(() => {
        let params = {
          PIDS: []
        };
        params.PIDS.push(row.PID);

        this.$api.wxNotic.party_building_remove(params).then((res) => {
          this.editLoading = false;
          if (res.code == 0) {
            this.$message({
              message: "操作成功",
              type: "success"
            });

            this.handleQuery();
          } else {
            this.$message({
              message: "操作失败, " + res.msg,
              type: "error"
            });
          }
        });
      });
    },
    //获取小区的列表选择器
    getCommunityList() {
      let params = {};
      params = {
        where: {
          CODES: []
        }
      };
      let param = JSON.stringify(params);
      this.loading = true;
      this.$api.three.communityList(params).then((res) => {
        if (res.code == 0) {
          this.loading = false;
          this.getCommunity = res.data;
        } else {
          this.$message({ message: "操作失败, " + res.msg, type: "error" });
        }
      });
    },
    // 翻页
    refreshPageRequest(val) {
      this.pageRequest.page = val;
      this.handleQuery();
    },
    //解绑设备
    deleteOne(e) {
      this.$confirm("确认提交吗？", "提示", {}).then(() => {
        let params = {};
        params.CID = e.CID;
        params.deviceType = e.deviceType;
        params.sn = e.sn;
        this.loading = true;
        this.$api.wxNotic.sys_facedevice_delete(params).then((res) => {
          this.loading = false;
          if (res.code == 0) {
            this.$message({
              message: "操作成功",
              type: "success"
            });
            this.handleQuery();
          } else {
            this.$message({
              message: "操作失败, " + res.msg,
              type: "error"
            });
          }
        });
      });
    },

    // 新增
    handleAdd(row) {
      this.footShow = false;
      this.title = "新增";
      if (row.title) this.title = "编辑";
      this.addVisible = true;
      this.operation = true;
      this.dataForm = JSON.parse(JSON.stringify(row));
    }
    // 编辑
  }
};
</script>
<style lang="scss" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.hover_clamp {
  cursor: pointer;
}

.mycon {
  color: #5ed3fa;
  font-size: 24px;
}
.aicen {
  align-items: center;
}
.p20 {
  padding: 20px;
}

.warning {
  margin-top: 18px;
  color: #fff;
  width: 16px;
  // background-color: rgba(1, 66, 95, 0.8);
  padding: 20px 10px 20px 10px;
  line-height: 18px;
  height: fit-content;
}

.row_m {
  height: calc(100% - 40px);
  width: calc(100% - 40px);
}

.table_m {
  background: none;
  color: #fff;
  font-size: 12px;

  overflow: hidden;
}

.box_m {
  width: calc((100% - 60px + 40px - (16px + 20px) * 2) / 2);
}

.name_m {
  width: 20%;
}

.cid_m {
  width: 20%;
}

.cid_t {
  width: 20%;
}

.address_m {
  width: 20%;
}

.date_m {
  width: 20%;
}

.line_m {
  /* width: 100%; */
  min-height: 2px;
  background-color: rgba(1, 78, 84, 1);
}

.line_sm {
  width: 100%;
  height: 1px;
  background-color: rgba(1, 78, 84, 1);
}

.ellips {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ptb10 {
  padding: 10px 0 10px 0;
}
</style>
